<template>
  <div class="mainContainer">
    <div class="top_left">管理系统</div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#333"
      text-color="#fff"
      router 
      active-text-color="yellow">
      <el-menu-item index="/login" route="/login" >注册</el-menu-item>
      <el-submenu index="2">
        <template slot="title">{{nickname}}</template>
        <el-menu-item index="2-1">修改密码</el-menu-item>
        <el-menu-item index="2-2" @click="exitTo">退出</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nickname:sessionStorage.getItem('username')||'我的账户'
    }
  },
  methods:{
    exitTo(){
      this.$go('/login');
      sessionStorage.removeItem('username');
    }
  },
}
</script>

<style>
.mainContainer{
  display: flex;
  padding: 0 20px;
  background-color: #333;
  justify-content: space-between;
  align-items: center
}
.top_left{
  color: #fff;
  font-size: 25px;
  letter-spacing: 5px;
}
</style>